Extended FABGuidelines擴充套件懸浮按鈕指導規則

Usage  用法

• 擴充套件FAB是一個帶文字說明的按鈕，用來突出顯示重要操作，比如"付款"、"釋出"或"新建"等功能。

• 和普通FAB相比，它更容易理解，因為直接顯示了按鈕的用途。

• 當需要詳細說明按鈕功能時，就可以使用擴充套件FAB。

在非滾動檢視中使用擴充套件 FAB。如果主操作出現在非滾動檢視，請改用按鈕（Button）代替 FAB。

額外強調（Additional Emphasis）

• 擴充套件 FAB 可用於強調關鍵操作，尤其是在圖示本身不夠直觀的情況下。

• 例如，在航班預訂或導航操作中，擴充套件 FAB 可提供更清晰的文字指引。

操作選項（Action Options）

Anatomy 結構

容器（Container）

• 擴充套件 FAB 的容器 採用圓角矩形形狀。

• 它的寬度可以是固定的，也可以是流體適配內容的。

• 當使用固定寬度時，容器的大小由圖示、文字和內邊距的總寬度決定。

Icon  圖示

Label text  標籤文字

• 擴充套件 FAB 的文字標籤應該清晰描述操作，例如“儲存草稿”或“新增到購物車”。

• 在有限空間內，可以截斷文字（truncate text），但應該是可選的，而不是預設行為。

Placement 位置

• 不要將擴充套件 FAB 放置在螢幕頂部，這樣可能會讓它看起來像標題欄的一部分。

• 不要將擴充套件 FAB 直接放入卡片或彈出對話方塊，它應獨立於其他 UI 元件存在。

Responsive Layout 響應式佈局

在大螢幕上，擴充套件 FAB 需調整位置以適應多列布局。在緊湊模式下，FAB 會收縮為普通形態。桌面端：FAB 位於側邊欄或右下角。移動端：FAB 根據螢幕大小自適應

Compact & Medium 緊湊與中等模式

Expanded 擴充套件模式

在擴充套件模式下，FAB 可能需要額外的空間，例如在對話介面或郵件撰寫介面中。這類場景下，FAB 可能包含更多文字或額外的操作選項。

Behavior 行為

Appearing  出現

擴充套件 FAB 使用進入和退出過渡動畫出現在螢幕上，確保其呈現流暢且不影響使用者體驗。

Expanding 展開

擴充套件 FAB 可變換形狀，採用容器轉換模式，既可作為介面一部分，也可擴充套件覆蓋整個螢幕。

Transforming 轉換

擴充套件 FAB 滾動時收縮，頁面底部時展開，以確保在需要時可用且不遮擋內容。

Scrolling 滾動

FAB向下滾動時收起，向上滾動時展開，既避免干擾使用者，又保持隨時可用。

當普通 FAB 變成擴充套件 FAB 時會播放動畫：按鈕裡的圖示會滑向左邊，然後文字說明會淡入顯示。

Interaction & style  互動與樣式

• 擴充套件 FAB 需要清晰的對比度，確保易於辨識。

• 文字標籤要保持清晰可讀。

• 在平板和桌面端，建議將其放置在右下角。

Initial focus  初始焦點

FAB不應預設獲得焦點，除非是頁面唯一可互動元素。焦點應按標題、主要內容、操作按鈕的順序自然流動。

Labeling elements  元素標註

擴充套件 FAB 的文字說明要簡單明瞭，比如"撰寫"或"分享"這樣的詞。在輔助功能（無障礙）模式下，還要加上特殊標籤，這樣可以讓讀屏軟體正確地讀出按鈕的用途。